<template>
  <div class="video-player" v-loading="loading">
    <div class="lost-video" v-if="isError">
      <svg
        width="256px"
        height="256px"
        viewBox="0 0 256 256"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g class="lost-video-img">
          <path d="M183.981308,107.098677 C182.501069,106.53539 180.894231,106.226804 179.214953,106.226804 L172.113006,106.226804 C170.125707,96.4861083 161.470109,89.1546392 151.093458,89.1546392 C140.716807,89.1546392 132.061209,96.4861083 130.073909,106.226804 L122.018692,106.226804 C114.648013,106.226804 108.672897,112.171724 108.672897,119.505155 L108.672897,136.61159 C108.672897,141.432587 111.183612,143.690722 115.345794,143.690722 L121.065421,143.690722 C123.434567,143.690722 125.35514,145.601589 125.35514,147.958763 C125.35514,150.315937 123.434567,152.226804 121.065421,152.226804 L117.252336,152.226804 C112.514043,152.226804 108.672897,156.048538 108.672897,160.762887 L108.672897,179.095643 C108.672897,180.578535 108.917213,181.894937 109.36798,183.051546 L4.75398,183.051546 C2.12842934,183.051546 -1.47774959e-14,180.923117 -1.50990331e-14,178.297566 L-1.33226763e-14,4.75398 C-1.36442135e-14,2.12842934 2.12842934,-4.05872589e-16 4.75398,-8.8817842e-16 L179.227328,8.8817842e-16 C181.852879,4.05872589e-16 183.981308,2.12842934 183.981308,4.75398 L183.981308,107.098677 Z M85.1750356,79.9341612 L90.3749113,79.9341612 C97.8482246,79.9341612 103.906542,73.8758438 103.906542,66.4025305 C103.906542,58.9292172 97.8482246,52.8708997 90.3749113,52.8708997 L85.1750356,52.8708997 L85.1750356,36.3597436 C85.1750356,33.5766599 82.9189005,31.3205248 80.1358168,31.3205248 L63.9122446,31.3205248 L63.9122446,26.8842413 C63.9122446,19.3699153 57.8206798,13.2783505 50.3063538,13.2783505 L50.1802611,13.2783505 C42.6659351,13.2783505 36.5743703,19.3699153 36.5743703,26.8842413 L36.5743703,31.3205248 L19.3382842,31.3205248 C16.5552005,31.3205248 14.2990654,33.5766599 14.2990654,36.3597436 L14.2990654,52.8708997 L18.4864272,52.8708997 C25.9597405,52.8708997 32.018058,58.9292172 32.018058,66.4025305 C32.018058,73.8758438 25.9597405,79.9341612 18.4864272,79.9341612 L14.2990654,79.9341612 L14.2990654,96.4453173 C14.2990654,99.228401 16.5552005,101.484536 19.3382842,101.484536 L36.5743703,101.484536 L36.5743703,97.0482525 C36.5743703,89.5339265 42.6659351,83.4423618 50.1802611,83.4423618 L50.3063538,83.4423618 C57.8206798,83.4423618 63.9122446,89.5339265 63.9122446,97.0482525 L63.9122446,101.484536 L80.1358168,101.484536 C82.9189005,101.484536 85.1750356,99.228401 85.1750356,96.4453173 L85.1750356,79.9341612 Z" id="合并形状" opacity="0.2" />
          <path d="M185.268494,162.449625 L185.268494,178.960781 C185.268494,181.743865 183.012358,184 180.229275,184 L164.005703,184 L164.005703,179.563716 C164.005703,172.04939 157.914138,165.957826 150.399812,165.957826 L150.273719,165.957826 C142.759393,165.957826 136.667828,172.04939 136.667828,179.563716 L136.667828,184 L119.431742,184 C116.648658,184 114.392523,181.743865 114.392523,178.960781 L114.392523,162.449625 L118.579885,162.449625 C126.053198,162.449625 132.111516,156.391308 132.111516,148.917994 C132.111516,141.444681 126.053198,135.386364 118.579885,135.386364 L114.392523,135.386364 L114.392523,118.875208 C114.392523,116.092124 116.648658,113.835989 119.431742,113.835989 L136.667828,113.835989 L136.667828,109.399705 C136.667828,101.885379 142.759393,95.7938144 150.273719,95.7938144 L150.399812,95.7938144 C157.914138,95.7938144 164.005703,101.885379 164.005703,109.399705 L164.005703,113.835989 L180.229275,113.835989 C183.012358,113.835989 185.268494,116.092124 185.268494,118.875208 L185.268494,135.386364 L190.468369,135.386364 C197.941683,135.386364 204,141.444681 204,148.917994 C204,156.391308 197.941683,162.449625 190.468369,162.449625 L185.268494,162.449625 Z" opacity="0.5" />
        </g>
      </svg>
      <p class="lost-video-text">
        视频插件加载失败
      </p>
      <p class="lost-video-text">
        <span>若视频未正常打开，请点击此处</span>
        <span class="link" @click="openDownload">下载</span>
        <span>
          并安装，并重启浏览器（推荐使用Chrome、IE11及以上版本）
        </span>
      </p>
      <p class="lost-video-text">
        <span>
          若已经安装过插件，请点击
        </span>
        <span class="link" @click="initWebControl">唤醒</span>
        <span>
          启动程序，并刷新当前页面
        </span>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { onMounted, onUnmounted, ref } from 'vue'
import Video from '@/utils/video'
import { useStore } from '@/store'

const store = useStore()
const props = defineProps({
  option: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['loaded'])

const loading = ref(false)
const isError = ref(false)
const loaded = ref(false)
const videoControl = ref<any>({})

// 初始化播放器
const initWebControl = () => {
  loading.value = true
  isError.value = false
  videoControl.value = new Video(Object.assign({
    el: '.video-player'
  }, props.option))
  videoControl.value.init().then(() => {
    loading.value = false
    mountListener()
    loaded.value = true
    emit('loaded')
  }).catch((e: any) => {
    loading.value = false
    isError.value = true
    ElMessage.error(e.message)
  })
}

// 单点播放
const play = (url: string, name: string) => {
  if (!loaded.value && !isError.value) {
    setTimeout(() => {
      play(url, name)
    }, 500)
    return
  }
  if (isError.value) return ElMessage.error('播放器连接失败,确认本地是否已安装并开启！')
  videoControl.value.play(url, name)
}

// 挂载监听事件
const mountListener = () => {
  window.addEventListener('scroll', resizeVideo)
  window.addEventListener('unload', destoryVideo)
  window.addEventListener('pagehide', hiddenVideo)
}

// 卸载监听事件
const unMountListener = () => {
  window.removeEventListener('scroll', resizeVideo)
  window.removeEventListener('unload', destoryVideo)
  window.removeEventListener('pagehide', hiddenVideo)
  destoryVideo()
}

// 隐藏视频组件
const hiddenVideo = () => {
  if (isError.value) return
  videoControl.value.hiddenWnd()
}

// 显示视频组件
const showVideo = () => {
  if (isError.value) return
  videoControl.value.showWnd()
}

// 销毁视频组件
const destoryVideo = async () => {
  hiddenVideo()
  // 销毁视频控件
  videoControl.value.destroy()
  videoControl.value = {}
}
// 重置视频
const resizeVideo = () => {
  videoControl.value.resizeWnd()
}

// 下载播放器组件
const openDownload = () => {
  if (store.state.config.videoDownload) {
    window.open(store.state.config.videoDownload)
  }
}

onMounted(() => {
  // 动画执行完毕执行
  window.setTimeout(() => {
    initWebControl()
  }, 500)
})

// 页面卸载清除播放组件
onUnmounted(unMountListener)

defineExpose({
  initWebControl,
  play,
  hiddenVideo,
  showVideo,
  destoryVideo,
  resizeVideo
})

</script>

<style lang="scss" scoped>
.video-player {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .lost-video {
    text-align: center;
    color: var(--el-text-color-primary);
    font-weight: bold;
    .lost-video-img {
      fill: var(--el-text-color-primary);

    }
    .lost-video-text {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 2em;
      .link {
        cursor: pointer;
        color: var(--el-color-primary);
        margin: 0 5px;
      }
    }
  }
}
</style>
